<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
<script src="../vue.js"></script>
</head>

<body>
<div id="app">

<!-- 
    v-for遍历字符串 item就是每一个字符
 -->
 <h1>v-for遍历字符串</h1>
 <div>
    <p v-for="(item,index) of str">{{item}}--{{index}}</p>
 </div>
 <!-- 
    v-for遍历对象 item就是value index就是key
  -->
  <h1>v-for遍历对象</h1>
  <div>
    <p v-for="item,index in person">{{item}}--{{index}}</p>
  </div>
  <!-- 
    v-for遍历数字,其实就是遍历数字对应的次数 item从1开始到count index仍然是下标
   -->
   <h1>v-for遍历数字</h1>
   <div>
    <p v-for="item,index in count">{{item}}---{{index}}</p>
   </div>
 </div>
 <script>
    Vue.config.productionTip=false;
    const vm=new Vue({
        el:"#app",
        data(){
            return {
                str:"abcdefg",
                person:{
                    name:"xiaowang",
                    age:18,
                    sex:"男",


                },
                count:10,
            }
        }
    })
 
 </script>
</body>

</html>